<template>
  <div class="editor_wrap">
    <vue-wangeditor id="editor1" :options="wange.options1" v-model="wange.content1" :text="text" ></vue-wangeditor>  
  </div>  
</template>
<script>
import emot from './emotions'
import { close } from 'fs';
  export default {    
    data () {
      return {
        length:"",
        text:'',
        wange:{
            initContent: '<p>要初始化的内容</p>',
              content1: '', // 包含html标签
              text1: '', // 不含html标签，纯文本
              options1: {
                width: '500px',
                height: '200px',
                menus: [
                  // 'head',  // 标题
                  // 'bold',  // 粗体
                  // 'fontSize',  // 字号
                  // 'fontName',  // 字体
                  // 'italic',  // 斜体
                  // 'underline',  // 下划线
                  // 'strikeThrough',  // 删除线
                  // 'foreColor',  // 文字颜色
                  // 'backColor',  // 背景颜色
                  // 'link',  // 插入链接
                  // 'list',  // 列表
                  // 'justify',  // 对齐方式
                  // 'quote',  // 引用
                  'emoticon',  // 表情
                  // 'image',  // 插入图片
                  // 'table',  // 表格
                  // 'video',  // 插入视频
                  // 'code',  // 插入代码
                  // 'undo',  // 撤销
                  // 'redo'  // 重复
                ],
                emotions:[
                  {
                      // tab 的标题
                      title: '默认',
                      // type -> 'emoji' / 'image'
                      type: 'image',
                      // content -> 数组
                      content: emot
                  },
              ]
              },
              content: '<p>edit here</p>',
              text: ''
          }
      }
    },    
    watch: {     
      'wange.content1'(v){        
        const reg = /<\/?.+?>/g
        let a=0;
        (v.match(reg)).forEach(item => {
            if (/^<img/.test(item)) {
              a+=2
            }
        });
        this.length=parseInt(a)+ parseInt((v.replace(/<\/?.+?>/g,"")).length)
        console.log(this.length)
        if(this.length>10){
            this.$toast('本文内容不超过十个字');
        }
      },
    }
  }
</script> 